<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<style type="text/css">
			html,body,div,input,ul,li,img{
				margin: 0;
				padding: 0;
				border: 0;
				box-sizing: border-box;
				outline: none;
			}
			.header_box,.mall_box,.footer_box{
				width: 100%;
				margin: 0 auto;
				font-size: 14px;
				text-align: center;
			}
			.header_box{
				height: 8vh;
				display: flex;
				justify-content: flex-start;
				align-items: center;
				/* background-color: red; */
			}
			.mall_box{
				height: 80vh;
				/* background-color: antiquewhite; */
			}
			.footer_box{
				height: 12vh;
				/* background-color: burlywood; */
			}
			
			/* header */
			.h_box{
				display: flex;
				justify-content: flex-start;
				align-items: center;
				padding-left: 2vw;
			}
			.input_box{
				width: 230px;
				height: 30px;
				display: flex;
				justify-content: space-between;
				align-items: center;
				border: 1px solid #bbb;
				/* background-color: aqua; */
			}
			.input_box>input{
				padding-left: 8px;
				width: 200px;
				height: 100%;
			}
			.select_img{
				width: 24px;
				height: 24px;
				background-image: url(img/select_m.png);
				background-repeat:no-repeat;
				background-size:100% 100%;
				-moz-background-size:100% 100%;
			}
			.select_img:hover{
				background-image: url(img/select_a.png);
			}
			
			
			/* 主面板 */
			.m_box{
				padding-left: 2vw;
				padding-right: 2vw;
				min-width: 300px;
			}
			.m_mall{
				height: 6vh;
				font-weight: 600;
				display: flex;
				justify-content: flex-start;
				align-items: center;
				background-color: #c7c7c7;
			}
			.m_mall_itme{
				width: 80px;
				height: 6vh;
				display: flex;
				justify-content: center;
				align-items: center;
				font-size: 16px;
				/* background-color: darkgoldenrod; */
			}
			.actives{
				border-bottom: 2px solid #0AA1EB;
				color: #0AA1EB;
			}
			.m_operation,.m_operation_title{
				width: 100px;
				text-align: center;
				/* background-color: darkgoldenrod; */
			}
			.m_operation{
				display: flex;
				justify-content: space-between;
				align-items: center;
				padding: 0 20px 0 20px;
			}
			.m_operation_coloured{
				color: #0aa1eb;
			}
			.m_operation_coloured:hover{
				color: #02d5ff;
				cursor:pointer;
			}
			
			
			
			.m_mall_list{
				height: 6vh;
				display: flex;
				justify-content: flex-start;
				align-items: center;
				padding-left: 20px;
				border-bottom: 1px solid #bbb;
				/* background-color: #00FFFF; */
			}
			.m_mall_list_itm{
				width: 150px;
			}
			.title_bg{
				background-color: #eee;
				font-weight: 600;
			}
			.quit_btn{
				width: 200px;
				height: 30px;
				background-color: #0aa1ed;
				display: flex;
				justify-content: center;
			}
		</style>
	</head>
	<body>
		<div id="" class="details_page">
			<!-- header开始 -->
			<div class="header_box">
				<div class="h_box">
					详情
				</div>
				<div class="quit_btn">
					返回
				</div>
			</div>
			<!-- header结束 -->
			<!-- mall开始 -->
			<div class="mall_box">
				<!-- title行开始 -->
				<div class="m_box">
					<div class="m_mall">
						<div class="m_mall_itme" :class="ope_room == 1 ? 'actives' : '' " @click="classify_active(1)">原始积分</div>
						<div class="m_mall_itme" :class="ope_room == 2 ? 'actives' : '' " @click="classify_active(2)">佣金</div>
						<div class="m_mall_itme" :class="ope_room == 3 ? 'actives' : '' " @click="classify_active(3)">兑货券</div>
					</div>
				</div>
				<!-- title行结束-->
				<!-- 内容区1开始 -->
				<div class="m_box" v-if="ope_room == 1">
					<div class="m_mall_list title_bg">
						<div class="m_mall_list_itm">商品名称</div>
						<div class="m_mall_list_itm">商品数量</div>
						<div class="m_mall_list_itm">交易时间</div>
						<div class="m_mall_list_itm">订单金额</div>
						<div class="m_mall_list_itm">订单编号</div>
						<div class="m_mall_list_itm">原始积分</div>
						<div class="m_mall_list_itm">释放倍数</div>
						<div class="m_mall_list_itm">预计获得兑货券</div>
					</div>
					<div class="m_mall_list" v-for="(item,index) in primitive_list" :key="index">
						<div class="m_mall_list_itm">{{item.order_product_name}}</div>
						<div class="m_mall_list_itm">{{item.nums}}</div>
						<div class="m_mall_list_itm">{{item.CreateTime}}</div>
						<div class="m_mall_list_itm">{{item.total_amount}}</div>
						<div class="m_mall_list_itm">{{item.id}}</div>
						<div class="m_mall_list_itm">{{item.BillIntegral}}</div>
						<div class="m_mall_list_itm">{{item.DeliverMultiple}}</div>
						<div class="m_mall_list_itm">{{item.ForecastIntegral}}</div>
					</div>
				</div>
				<!-- 内容区1结束 -->
				<!-- 内容区2开始 -->
				<div class="m_box" v-if="ope_room == 2">
					<div class="m_mall_list title_bg">
						<div class="m_mall_list_itm">总金额</div>
						<div class="m_mall_list_itm">生成时间</div>
						<div class="m_mall_list_itm">类型</div>
						<div class="m_mall_list_itm">收入/支出</div>
						<div class="m_mall_list_itm">转账金币数量</div>
						<div class="m_mall_list_itm">转账人/被转帐人</div>
					</div>
					<div class="m_mall_list" v-for="(item,index) in ticket_list" :key="index">
						<div class="m_mall_list_itm">{{item.coin}}</div>
						<div class="m_mall_list_itm">{{item.create_time}}</div>
						<div class="m_mall_list_itm">{{item.desc}}</div>
						<div class="m_mall_list_itm">{{item.income_or==0 ? "收入" : "支出"}}</div>
						<div class="m_mall_list_itm">{{item.increment_coin}}</div>
						<div class="m_mall_list_itm">{{item.income_or==0 ? item.main_present_id : item.present_id}}</div>
					</div>
				</div>
				<!-- 内容区2结束 -->
				<!-- 内容区3开始 -->
				<div class="m_box" v-if="ope_room == 3">
					<div class="m_mall_list title_bg">
						<div class="m_mall_list_itm">描述</div>
						<div class="m_mall_list_itm">金币</div>
						<div class="m_mall_list_itm">兑换金额</div>
						<div class="m_mall_list_itm">剩余预计对货卷</div>
						<div class="m_mall_list_itm">收入/支出</div>
						<div class="m_mall_list_itm">提货卷</div>
						<div class="m_mall_list_itm">准备金</div>
						<div class="m_mall_list_itm">兑换时间</div>
					</div>
					<div class="m_mall_list" v-for="(item,index) in conversion_list" :key="index">
						<div class="m_mall_list_itm">{{item.desc}}</div>
						<div class="m_mall_list_itm">{{item.coin}}</div>
						<div class="m_mall_list_itm">{{item.coupon}}</div>
						<div class="m_mall_list_itm">{{item.remain_coupon}}</div>
						<div class="m_mall_list_itm">{{item.income_or==0 ? "收入" : "支出"}}</div>
						<div class="m_mall_list_itm">{{item.bill_of_shopping}}</div>
						<div class="m_mall_list_itm">{{item.reserve}}</div>
						<div class="m_mall_list_itm">{{item.create_time}}</div>
					</div>
				</div>
				<!-- 内容区3结束 -->
			</div>
			<!-- mall结束 -->
			<!-- footer开始 -->
			<!-- <div class="footer_box">
				<div class="f_box">
				</div>
			</div> -->
			<!-- footer结束 -->
		</div>
	</body>
	<script src="/static/layui/layui.all.js"></script>
	<script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.js"></script>
	<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
	<script type="text/javascript">
		window.onload = function(){
			index();
		};

		function index(){
			var vm = new Vue({
				el: ".details_page",
				data: {
					ope_room:"1",//记录选项卡当前选中标签--默认选中1
					url_id:'',//地址栏传来的id
					conversion_list:'',//初始化兑货券数据
					ticket_list:'',//初始化佣金数据
					primitive_list:''//初始化1数据
				},
				mounted: function(){
					//挂载完成后请求数据
					this.ajax_fun();//1
					this.ticket();//2
					//conversion_list
					this.conversions();//3
				},
				methods: {
					//获取兑货券信息
					conversions:function(){
						function getCookie(name) {
							let cookieValue = null;
							if (document.cookie && document.cookie !== '') {
								let cookies = document.cookie.split(';');
								for (let i = 0; i < cookies.length; i++) {
									let cookie = cookies[i].trim();
									// 判断这个cookie的参数名是不是我们想要的
									if (cookie.substring(0, name.length + 1) === (name + '=')) {
										cookieValue = decodeURIComponent(cookie.substring(name.length + 1));
										break;
									}
								}
							}
							return cookieValue;
						};
						let id=getCookie("id");
						$.ajax({
							type: 'get',
							url: "/system/recommended/userCoinCertificate",
							data: {"id" : id},
							dataType: 'json',
							success: function (res) {
								layer.msg("查询成功");
								console.log('兑货券返回========',res);
								vm.conversion_list=res.data;
							}, fail: function () {
								layer.msg("查询失败");
							}
						});
					},


					//点击选项卡--切换
					classify_active:function(opes){
						this.ope_room = opes;
						// console.log(this.ope_room);
							//this.url_id//地址栏传来的id
					},
					//请求数据
					ajax_fun:function(){
						function getCookie(name) {
							let cookieValue = null;
							if (document.cookie && document.cookie !== '') {
								let cookies = document.cookie.split(';');
								for (let i = 0; i < cookies.length; i++) {
									let cookie = cookies[i].trim();
									// 判断这个cookie的参数名是不是我们想要的
									if (cookie.substring(0, name.length + 1) === (name + '=')) {
										cookieValue = decodeURIComponent(cookie.substring(name.length + 1));
										break;
									}
								}
							}
							return cookieValue;
						};
						let id=getCookie("id");
						// console.log("id========",id);
						// console.log("cookie========",document.cookie.split(';'));
						$.ajax({
							type: 'get',
							url: "/system/recommended/TheOriginalIntegral",
							data: {"id" : id},
							dataType: 'json',
							success: function (res) {
								layer.msg("查询成功");
								// console.log(res);
								vm.primitive_list=res.data;
							}, fail: function () {
								layer.msg("查询失败");
							}
						});
					},
					//初始化兑货券数据
					ticket:function(){
						function getCookie(name) {
							let cookieValue = null;
							if (document.cookie && document.cookie !== '') {
								let cookies = document.cookie.split(';');
								for (let i = 0; i < cookies.length; i++) {
									let cookie = cookies[i].trim();
									// 判断这个cookie的参数名是不是我们想要的
									if (cookie.substring(0, name.length + 1) === (name + '=')) {
										cookieValue = decodeURIComponent(cookie.substring(name.length + 1));
										break;
									}
								}
							}
							return cookieValue;
						};
						let id=getCookie("id");
						$.ajax({
							type: 'get',
							url: "/system/recommended/UserCoin",
							data: {"id" : id},
							dataType: 'json',
							success: function (res) {
								layer.msg("查询成功");
								console.log('2===============',res);
								vm.ticket_list=res.data;
							}, fail: function () {
								layer.msg("查询失败");
							}
						});
					},
			  }
			});
		}
	</script>
</html>
